<template>
  <div class="contentWrapper">
    <div class="contentTitle">竞争力分析</div>
    <div class="contentContainer">
      <div class="contentTop">
        <div class="contentSmallTitle">分析记录</div>
        <div class="reuploadBtn" v-if="fileUrl">
          <el-button
            v-has="'edit'"
            type="primary"
            round
            plain
            size="mini"
            style="display: flex"
            icon="el-icon-upload"
            @click="updateFile"
          >
            更新当前文件</el-button
          >
        </div>

        <div class="downloadBtn" v-if="fileUrl">
          <el-button
            round
            plain
            size="mini"
            v-has="'download'"
            style="display: flex"
            icon="el-icon-download"
            @click="handleDownloadClick"
          >
            下载</el-button
          >
        </div>
        <div class="downloadBtn" v-if="fileUrl">
          <el-button
            round
            plain
            size="mini"
            v-has="'upload'"
            style="display: flex"
            icon="el-icon-plus"
            @click="uploadMedia"
          >
            新增文件</el-button
          >
        </div>
        <el-upload
          @click.stop
          v-show="false"
          class="upload-file"
          :multiple="false"
          id="uploadFile"
          :action="uploadAction"
          :accept="accept"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          :before-upload="beforeUpload"
        >
        </el-upload>
      </div>
      <div class="contentMain" v-loading="pdfLoading && fileUrl">
        <div
          :class="[
            judgeFileType(fileUrl) === 'empty' || !fileUrl
              ? ''
              : 'officeWrapper',
          ]"
          style="width: 908px"
        >
          <el-scrollbar class="scroll">
            <vue-office-pdf
              :src="fileUrl"
              @rendered="renderedHandler"
              @error="errorHandler"
              v-if="judgeFileType(fileUrl) === 'pdf'"
            />
            <vue-office-docx
              :src="fileUrl"
              @rendered="renderedHandler"
              @error="errorHandler"
              v-if="judgeFileType(fileUrl) === 'word'"
            />
            <Empty v-if="judgeFileType(fileUrl) === 'empty' || !fileUrl" />
            <div class="uploadNewFileBtn" v-if="!fileUrl">
              <el-button
                type="primary"
                round
                plain
                size="mini"
                v-has="'upload'"
                @click="uploadMedia"
              >
                <elan-svg icon="noFileUpload"></elan-svg>
                <span>上传文件</span></el-button
              >
            </div>
          </el-scrollbar>
        </div>
        <div class="fileOverview" v-if="fileList.length">
          <div class="overViewTitle">文件预览</div>
          <ul style="height: 100%; overflow-y: auto">
            <li
              v-for="(item, index) in fileList"
              :key="index"
              @click="changeFileUrl(item, index)"
              :class="[activeLiIndex === index ? 'activeLi' : 'fileLi']"
            >
              {{ index + 1 }} {{ item.fileName }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import { download } from "@/utils/fileSaver";
import { getFileList, uploadCareerFile, deleteFile } from "@/api/index";
export default {
  name: "CompetitiveAnalysis",
  components: {
    VueOfficePdf,
    VueOfficeDocx,
  },
  props: {
    selectedRow: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      drawerVisible: false,
      fileName: "",
      activeLiIndex: 0, // 当前激活的li
      fileUrl: "",
      uploadAction: "https://upload.yl1001.com/upload/files/save",
      accept: ".pdf,.PDF,.docx",
      fileGetting: false,
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false,
      pageNumPending: null,
      pdfLoading: true,
      fileList: [], // 顾问总结的报告 注意只是顾问总结的报告
      currentFileId: "",
      currentFileName: "",
    };
  },
  mounted() {
    this.getFileList(true);
  },
  methods: {
    async updateFile() {
      this.uploadMedia();
      await deleteFile({
        id: this.currentFileId,
      });
    },
    changeFileUrl(item, index) {
      if (this.activeLiIndex == index) return;
      this.pdfLoading = true;
      this.fileUrl = item.fileUrl;
      this.currentFileName = item.fileName;
      this.drawerVisible = false;
      this.activeLiIndex = index;
      this.currentFileId = item.id;
    },
    showFileList() {
      this.drawerVisible = true;
    },
    async uploadCareerFile(fileUrl) {
      const params = {
        personId: this.selectedRow.personId,
        consultantId: this.selectedRow.consultantId,
        fileType: "5",
        fileUrl: fileUrl,
        fileName: this.fileName,
      };
      const res = await uploadCareerFile(params);
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: "上传成功",
        });
        this.getFileList(false);
      } else {
        this.$message.error(res.status_desc);
      }
    },
    async getFileList(showFirstFile) {
      const params = {
        personId: this.selectedRow.personId,
        consultantId: this.selectedRow.consultantId,
        fileType: "5",
      };
      const res = await getFileList(params);
      if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
        this.fileList = res.data;
        this.fileUrl =
          res.data[showFirstFile ? 0 : res.data.length - 1].fileUrl;
        this.currentFileId =
          res.data[showFirstFile ? 0 : res.data.length - 1].id;
        this.currentFileName =
          res.data[showFirstFile ? 0 : res.data.length - 1].fileName;
        this.activeLiIndex = showFirstFile ? 0 : res.data.length - 1;
      }
    },
    // 判断是pdf文件还是word文件
    judgeFileType(str) {
      let res = str.substring(str.length - 1, str.length);
      if (res === "x" || res === "X" || res === "c" || res === "C") {
        return "word";
      }
      if (res === "f" || res === "F") {
        return "pdf";
      }
      return "empty";
    },
    uploadMedia() {
      if (!this.selectedRow.consultantId) {
        this.$message.error("该用户还没绑定顾问！");
        return;
      }
      // 防抖
      if (this.fileGetting) {
        return;
      }
      this.fileGetting = true;
      setTimeout(() => {
        this.fileGetting = false;
      }, 1000);
      setTimeout(() => {
        document.querySelector("#uploadFile").querySelector("input").click();
      }, 100);
    },
    beforeUpload(files) {
      this.fileName = files.name;
      if (
        [
          "application/pdf",
          "application/vnd.openxmlformats-officedocument.presentationml.presentation",
          "application/msword",
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          "application/vnd.ms-powerpoint",
        ].indexOf(files.type) == -1
      ) {
        this.$message.error("请上传正确的文本格式文件，如pdf doc docx");
        return false;
      }
    },
    handleUploadSuccess(data) {
      this.fileUrl = data.data[0];
      this.uploadCareerFile(data.data[0]);
    },
    handleDownloadClick() {
      download(this.fileUrl, this.currentFileName);
    },
    renderedHandler() {
      this.pdfLoading = false;
    },
    errorHandler() {
      this.$message.info("pdf正在渲染中...");
      this.pdfLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.contentWrapper {
  .contentTitle {
    font-size: 22px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 800;
    color: #222222;
    line-height: 30px;
    margin-bottom: 17px;
  }
  .contentContainer {
    .contentTop {
      display: flex;
      align-items: center;
      margin-bottom: 14px;
      position: relative;
      .contentSmallTitle {
        font-size: 18px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 25px;
        margin-right: 26px;
        &::before {
          content: "";
          display: inline-block;
          width: 5px;
          height: 15px;
          background: #7052ff;
          border-radius: 100px;
          margin-right: 8px;
        }
      }

      .downloadBtn {
        margin-left: 14px;
        /deep/.el-button.is-round {
          background-color: transparent;
        }
        .svg-icon {
          font-size: 16px;
          margin-right: 5px;
        }
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }
    .contentMain {
      width: 100%;
      height: 510px;
      .officeWrapper {
        width: 783px;
        border-radius: 8px 0px 8px 8px;
        border: 1px solid #e6e5e7;
        overflow: hidden;
      }
      display: flex;
      /deep/.vue-office-pdf-wrapper {
        background-color: #ffffff !important;
        width: 100%;
        overflow: hidden;
      }
      /deep/.vue-office-pdf {
        overflow-x: hidden;
      }
      /deep/ .vue-office-docx {
        overflow-x: hidden;
      }
      /deep/ .docx-wrapper {
        background-color: #fff;
      }

      .scroll {
        height: 100%;
        .uploadNewFileBtn {
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-top: 23px;
          .svg-icon {
            font-size: 16px;
          }
          /deep/.el-button.is-round span {
            color: #ffffff;
          }
          /deep/.el-button--primary.is-plain {
            color: #7052ff;
            background: #7052ff;
            border-color: #7052ff;
            width: 130px;
            height: 40px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 14px;
          }
          span {
            margin-left: 5px;
            color: #ffffff;
          }
        }
      }
    }
  }
  .fileOverview {
    position: relative;
    .overViewTitle {
      width: 109px;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 22px;
      position: absolute;
      margin-top: -30px;
    }
  }
  .fileLi,
  .activeLi {
    padding-left: 15px;
    cursor: pointer;
    font-size: 16px;
    font-family: PingFang-SC, PingFang-SC;
    line-height: 30px;
    height: 30px;
    width: 163px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 12px;
  }
  .fileLi {
    color: #888888;
  }
  .activeLi {
    background: #f2e9ff;
    color: #7052ff;
  }
}
::v-deep .el-button.is-round {
  span {
    display: flex;
    align-items: center;
  }
}
</style>
